import React,{Component} from 'react';
import {connect} from 'react-redux'
import mapDispatchToProps from '../actions/mapDispatchToProps'
import mapStateToProps from '../value/mapStateToProps'
import { Button } from 'element-react';
import 'element-theme-default';
import {
    NavLink
  } from 'react-router-dom';
 class  Header extends Component{
	signout=()=>{
           this.props.falseLogin();
	}
	render(){
		if(this.props.loginState){
			var cancellation=(<li>								
								   <Button onClick={this.signout} type="warning" style={{marginTop:"10px"}}>注销</Button>								
							</li>)
            var loginState=(
				<li><NavLink to="/" activeClassName="active">欢迎{this.props.name}来到</NavLink></li> 
			)
		}else{
			var loginState=(
				<li><NavLink to="/QueryParams" activeClassName="active">登录</NavLink></li> 
			)
			var cancellation=(<li><NavLink to="/Register" activeClassName="active">注册</NavLink></li>)
		}
		return (			
			<div className="navbar-wrapper" style={{backgroundColor:"#8B8378",fontWeight:"900"}}>
				<div className="container">
					<div className="navbar-header">
						<a className="navbar-brand" href="#">未名汪</a>
					</div>
					<div id="navbar" className="navbar-collapse collapse">
						<ul className="nav navbar-nav" style={{fontSize:"20px",color:"#FFFFFF"}}>
							<li><NavLink to="/" activeClassName="active">首页</NavLink></li>
							<li><NavLink to="/Flowers" activeClassName="active">产品总览</NavLink></li>
							<li><NavLink to="/Recursive" activeClassName="active">备用</NavLink></li>
							<li><NavLink to="/Carts" activeClassName="active">购物车</NavLink></li>
							{loginState}
							{cancellation}
						</ul>
					</div>
				</div>
			</div>	
					
					 
			
		)
	}
}
export default connect(mapStateToProps,mapDispatchToProps)(Header)